<template>
  <div><br><br><br>
    <div class="users_login">
        <el-form :model="from_user" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="手机号" prop="pass">
            <el-input placeholder="请输入手机号" type="type" v-model="from_user.mobile" autocomplete="off"></el-input>
            <el-button :disabled='flag' @click="register_code">{{mobile_desc}}</el-button>
        </el-form-item>

        <el-form-item label="手机验证码" prop="sms_code">
            <el-input placeholder="请输入手机验证码" type="type" v-model="from_user.sms_code" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
            <el-input placeholder="请输入密码" type="type" v-model="from_user.password" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="角色" prop="type">
            <el-select v-model="from_user.type" placeholder="请选择">
                <el-option v-for="i,j in options" :key="j" :label="i.label" :value="i.value"></el-option>
            </el-select>
        </el-form-item>

        

        <el-form-item>
            <el-button type="primary" @click="submitForm">注册</el-button>
            <el-button type="primary" @click="log">去登录</el-button>
        </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            from_user:{
                mobile:"",
                password:"",
                sms_code:"",
                type:""
            },
            mobile_desc:"发送手机验证码",
            flag:false,
            time:60,
            options:[{
                'value':0,
                'label':"雇主"
            },{
                'value':1,
                'label':"服务商"
            }]
        }
    },
    methods:{
        log(){
            this.$router.push('/login')
        },
        submitForm(){
            var reg = /^1[3-9]\d{9}$/
            if(!reg.test(this.from_user.mobile)){
                alert('手机号格式错误')
                return
            }
            if(this.from_user.sms_code == "" || this.from_user.sms_code == null){
                alert("手机验证码不能为空")
                return
            }
            if(this.from_user.password == "" || this.from_user.password == null){
                alert("密码不能为空")
                return
            }
            this.axios.post('/users_register',this.from_user).then(resp=>{
                console.log(resp)
                if(resp.data.code == 200){
                    alert(resp.data.msg)
                }else{
                    alert(resp.data.msg)
                }
            })
        },
        register_code(){
            this.axios.post('/register_code',{'mobile':this.from_user.mobile}).then(resp=>{
                console.log(resp)
                if(resp.data.code == 200){
                    this.flag = true
                    var t = setInterval(()=>{
                        if(this.time == 0){
                            clearInterval(t)
                            this.flag = false
                            this.time = 60
                            this.mobile_desc = "发送短信验证码"
                        }else{
                            this.time--
                            this.mobile_desc = this.time + "秒"
                        }
                    },1000)
                    alert(resp.data.msg)
                }else{
                    alert(resp.data.msg)
                }
            })
        }
    },
    mounted(){

    }
}
</script>

<style>

</style>